<div id="nb-wrapper">
        <div class="nb-welcome-page">
            <mat-card class="form-card text-center">
                <mat-card-content>
                    <div class="text-center">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="105.125px"
                            height="79.971px" viewBox="0 0 105.125 79.971" enable-background="new 0 0 105.125 79.971" xml:space="preserve">
                            <g id="lables">
                            </g>
                            <g id="Icons">
                                <g>
                                    <circle fill="#E9EAEB" cx="52" cy="48.971" r="20" />
                                    <path fill="none" stroke="#D8D8D8" stroke-width="2" stroke-miterlimit="10" d="M29.657,65.902
                                    c-3.517-4.677-5.602-10.492-5.602-16.795c0-15.448,12.523-27.972,27.973-27.972C67.477,21.135,80,33.659,80,49.107
                                    c0,6.304-2.085,12.121-5.604,16.798" />
                                    <g>
                                        <path fill="#FFFFFF" stroke="#2A5082" stroke-width="2" stroke-miterlimit="10" d="M52,54.971c2.292,0,6.438-3.063,7-4
                                        s0.775-1.863,1-3c0.053-0.27,0.828-1.771,1-2c0.942-1.253,1-5,1-5l-1-1c0,0-0.244-3.141-0.383-4.681
                                        c-0.575-4.498-3.674-7.319-8.617-7.319s-8.042,2.822-8.617,7.319C43.244,36.831,43,39.971,43,39.971l-1,1c0,0,0.058,3.747,1,5
                                        c0.172,0.229,0.947,1.73,1,2c0.224,1.137,0.438,2.063,1,3S49.708,54.971,52,54.971z" />
                                        <path fill="#2DC1E5" stroke="#2A5082" stroke-width="2" stroke-miterlimit="10" d="M52,74.971c7.004,0,13.39-2.432,18-7v-4
                                        c-0.561-2.002-2.162-3.026-4-4l-7-3c0,0-3.604,3-7,3s-6-3-6-3l-8,3c-1.838,0.974-3.439,1.998-4,4v4
                                        C38.61,72.54,44.996,74.971,52,74.971z" />
                                        <g>
                                            <line fill="none" stroke="#2A5082" stroke-width="2" stroke-miterlimit="10" x1="46" y1="56.971" x2="46" y2="51.971" />
                                        </g>
                                        <g>
                                            <line fill="none" stroke="#2A5082" stroke-width="2" stroke-miterlimit="10" x1="58" y1="57.565" x2="58" y2="51.971" />
                                        </g>
                                    </g>
                                </g>
                                <ellipse fill="#EE5456" cx="12.771" cy="43.409" rx="2.104" ry="2.063" />
                                <polygon fill="#EE5456" points="86.028,32.771 85.644,33.905 86.359,34.864 85.163,34.849 84.471,35.826 84.116,34.683 
                                82.973,34.328 83.95,33.636 83.935,32.439 84.894,33.155 	" />
                                <polygon fill="#2EC3E6" points="29.75,14.596 29.083,14.37 28.519,14.791 28.527,14.087 27.952,13.68 28.625,13.471 28.834,12.799 
                                29.241,13.374 29.945,13.365 29.523,13.929 	" />
                                <circle fill="none" stroke="#2EC3E6" stroke-miterlimit="10" cx="15.25" cy="18.471" r="1.125" />
                                <circle fill="#2EC3E6" cx="89.75" cy="47.221" r="1.25" />
                                <circle fill="#2EC3E6" cx="71.688" cy="18.784" r="1.688" />
                                <rect x="37" y="7.971" fill="#CECECE" width="1" height="1" />
                                <rect x="85" y="57.971" transform="matrix(0.9503 -0.3114 0.3114 0.9503 -14.2181 29.8919)" fill="#CECECE" width="3" height="3"
                                />
                                <rect x="14.334" y="57.805" fill="#CECECE" width="2" height="2" />
                        
                                <rect x="16" y="31.971" transform="matrix(0.6706 -0.7419 0.7419 0.6706 -18.8596 23.4739)" fill="none" stroke="#CECECE" stroke-miterlimit="10"
                                    width="2" height="2" />
                                <rect x="49" y="8.971" transform="matrix(0.5866 -0.8099 0.8099 0.5866 12.397 45.2283)" fill="#2EC3E6" width="3" height="3"
                                />
                                <circle fill="#FDDB00" cx="88.834" cy="21.638" r="1.5" />
                                <circle fill="#FDDB00" cx="26.583" cy="23.555" r="0.75" />
                                <circle fill="#FDDB00" cx="63.625" cy="8.763" r="1.042" />
                                <polygon fill="#FDDB00" points="21.118,11.668 21.705,12.087 22.385,11.841 22.167,12.53 22.61,13.099 21.889,13.104 
                                21.485,13.703 21.256,13.018 20.562,12.819 21.143,12.389 	" />
                                <polygon fill="#D8D8D8" points="82.083,10.138 81.728,11.087 80.728,11.254 80.083,10.472 80.438,9.522 81.438,9.355 	" />
                                <polygon fill="#D8D8D8" points="40.083,17.305 38.819,17.826 37.736,16.992 37.917,15.638 39.181,15.117 40.264,15.95 	" />
                                <polygon fill="#D8D8D8" points="61.417,16.221 60.548,16.394 59.964,15.727 60.249,14.888 61.118,14.716 61.702,15.382 	" />
                                <polygon fill="#D8D8D8" points="94,36.555 92.964,37.015 92.047,36.348 92.166,35.221 93.202,34.76 94.119,35.427 	" />
                            </g>
                            <g id="Layer_3">
                            </g>
                        </svg>
                    </div>
                    <div class="card-body" *ngIf="!allowChange">
                        <div class="alert {{alertClass}} auth-message" role="alert" *ngIf="message">{{message}}</div>
                        <div class="link">
                            <a [routerLink]="['/login']" title="Login Page"> Login Page</a> |
                            <a routerLink="/" title="Home Page"> Home Page</a>
                        </div>
                    </div>
                    <div class="card-body" *ngIf="allowChange">
                            <div class="alert {{alertClass}} auth-message" role="alert" *ngIf="message">{{message}}</div>                        
                            <form class="generic-form"  role="form" novalidate [formGroup]="changePasswordForm" (ngSubmit)="onSubmit()">
                                <h1 class="text-center">Change Password</h1>
                                <mat-form-field class="full-width mb-3">
                                    <input type="{{passwordType}}" formControlName="password" matInput placeholder="New Password">
                                    <i class="icon-change-type fa {{viewPassEye}}" (click)="showPass()"></i>
                                    <mat-error>
                                        <control-messages [isSubmitted]="isSubmitted" [control]="changePasswordForm.controls['password']"></control-messages>
                                    </mat-error>
                                </mat-form-field>
                                <mat-form-field class="full-width">
                                        <input type="{{confirmPasswordType}}" formControlName="confirmPassword" matInput placeholder="Retype New Password">
                                        <i class="icon-change-type fa {{viewConfirmPassEye}}" (click)="showConfirmPass()"></i>
                                        <mat-error>
                                            <control-messages [isSubmitted]="isSubmitted" [control]="changePasswordForm.controls['confirmPassword']"></control-messages>
                                        </mat-error>
                                    </mat-form-field>
                                    <mat-error class="text-left" *ngIf="changePasswordForm.hasError('mismatchedPasswords') && changePasswordForm.controls['confirmPassword'].dirty">
                                                    Passwords do not match.
                                    </mat-error>
                                <div class="btn-wrap">
                                    <button type="submit" processing class="nb-btn-blue full-width" mat-raised-button>Submit</button>
                                </div>
                            </form>
                    </div>
                </mat-card-content>
            </mat-card>
        </div>
    </div>
    
    
    